<template>
  <div v-show="configType !== 'created'">
    <div class="head">
      <div class="chunk title">
        <div class="product">配置日志</div>
      </div>
    </div>
    <div class="card card-list">
      <el-tabs v-model="yearTabs">
        <el-tab-pane
          :label="item.year"
          :name="item.year"
          v-for="item in configTime"
          :key="item.year"
        >
          <div slot="label" style="width: 100px; text-align: center">
            {{ item.year }}
          </div>
          <div style="padding: 0 10px">
            <el-button
              size="mini"
              :type="date === `${item.year}-${citem}` ? 'primary' : ''"
              v-for="citem in item.children"
              :key="citem"
              @click="getLogDetail(`${item.year}-${citem}`)"
              >{{ citem }}
            </el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div style="margin: 10px">
        <!-- 组合日志 -->
        <el-table
          :data="this.tableComposition"
          size="mini"
          style="width: 100%; margin-top: 10px"
        >
          <el-table-column
            prop="compositionName"
            label="组合名称"
            align="center"
            min-width="160"
          >
          </el-table-column>
          <el-table-column
            prop="configurationTime"
            label="配置日期"
            align="center"
            width="100"
          >
            <template slot-scope="{ row }">
              <span>{{ row.configurationTime.split(" ")[0] }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="variationType"
            label="变动类型"
            align="center"
            width="80"
          >
            <template slot-scope="{ row }">
              <span v-if="row.variationType === 0">出金</span>
              <span v-else-if="row.variationType === 1">入金</span>
              <span v-else>配置方法</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="variationMoney"
            label="变动金额"
            align="center"
          ></el-table-column>
          <el-table-column prop="changeShare" label="变动份额" align="center">
            <template slot-scope="{ row }">
              {{ row.changeShare || 0 }}
            </template>
          </el-table-column>
          <el-table-column prop="" label="总金额(万元)" align="center">
            <el-table-column prop="investMoneyBefore" label="变动前">
            </el-table-column>
            <el-table-column prop="investMoneyAfter" label="变动后">
            </el-table-column>
          </el-table-column>
          <el-table-column prop="" label="总份额" align="center">
            <el-table-column prop="investShare" label="变动前">
              <template slot-scope="{ row }">
                {{ row.investShare || 0 }}
              </template>
            </el-table-column>
            <el-table-column prop="" label="变动后">
              <template slot-scope="{ row }">
                {{ row.investShareAfter || 0 }}
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column prop="" label="复利周期" align="center">
            <el-table-column
              prop="compoundPeriodBefore"
              label="变动前"
              width="80"
            >
              <template slot-scope="{ row }">
                <span v-if="row.compoundPeriodBefore === 1">不复利</span>
                <span v-else-if="row.compoundPeriodBefore === 3"> 按月 </span>
                <span v-else-if="row.compoundPeriodBefore === 4">按季</span>
                <span v-else-if="row.compoundPeriodBefore === 5">按年</span>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="compoundPeriodAfter"
              label="变动后"
              width="80"
            >
              <template slot-scope="{ row }">
                <span v-if="row.compoundPeriodAfter === 1">不复利</span>
                <span v-else-if="row.compoundPeriodAfter === 3"> 按月 </span>
                <span v-else-if="row.compoundPeriodAfter === 4">按季</span>
                <span v-else-if="row.compoundPeriodAfter === 5">按年</span>
                <span v-else>-</span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column prop="" label="复利方式" align="center">
            <el-table-column
              prop="compoundTypeBefore"
              label="变动前"
              width="100"
            >
              <template slot-scope="{ row }">
                <span v-if="row.compoundTypeBefore === 1">全组合复利</span>
                <span v-else-if="row.compoundTypeBefore === 2">
                  按策略复利
                </span>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="compoundTypeAfter"
              label="变动后"
              width="100"
            >
              <template slot-scope="{ row }">
                <span v-if="row.compoundTypeAfter === 1">全组合复利</span>
                <span v-else-if="row.compoundTypeAfter === 2">
                  按策略复利
                </span>
                <span v-else>-</span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column prop="" label="固收年化" align="center">
            <el-table-column prop="fixedIncomeYearBefore" label="变动前">
            </el-table-column>
            <el-table-column prop="fixedIncomeYearAfter" label="变动后">
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop="configurationStatus"
            label="配置状态"
            align="center"
            width="80"
          >
            <template slot-scope="{ row }">
              <span v-if="row.configurationStatus === 1">配置成功</span>
              <span v-else-if="row.configurationStatus === 2">配置失败</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 组合/分类 日志 -->
        <el-table
          :data="this.tableClassify"
          size="mini"
          style="width: 100%; margin-top: 10px"
        >
          <el-table-column prop="classifyName" label="分类名称" align="center">
          </el-table-column>
          <el-table-column prop="variationType" label="变动类型" align="center">
            <template slot-scope="{ row }">
              <span v-if="row.variationType === 0">出金</span>
              <span v-else-if="row.variationType === 1">入金</span>
              <span v-else>配置方法</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="variationMoney"
            label="变动金额"
            align="center"
          ></el-table-column>
          <el-table-column prop="" label="总金额(万元)" align="center">
            <el-table-column prop="investMoneyBefore" label="变动前">
            </el-table-column>
            <el-table-column prop="investMoneyAfter" label="变动后">
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop="configurationStatus"
            label="配置状态"
            align="center"
          >
            <template slot-scope="{ row }">
              <span v-if="row.configurationStatus === 1">配置成功</span>
              <span v-else-if="row.configurationStatus === 2">配置失败</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 组合/策略 日志 -->
        <el-table
          :data="this.tableStrategy"
          size="mini"
          style="width: 100%; margin-top: 10px"
        >
          <el-table-column
            prop="strategyName"
            label="策略名称"
            align="center"
          ></el-table-column>
          <el-table-column
            width="100"
            prop="configurationTime"
            label="配置日期"
            align="center"
          >
            <template slot-scope="{ row }">
              <span>{{ row.configurationTime.split(" ")[0] }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="variationType" label="变动类型" align="center">
            <template slot-scope="{ row }">
              <span v-if="row.variationType === 0">出金</span>
              <span v-else-if="row.variationType === 1">入金</span>
              <span v-else>配置方法</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="variationMoney"
            label="变动金额"
            align="center"
          ></el-table-column>
          <el-table-column prop="changeShare" label="变动份额" align="center">
            <template slot-scope="{ row }">
              {{ row.changeShare || 0 }}
            </template>
          </el-table-column>
          <el-table-column prop="" label="总金额(万元)" align="center">
            <el-table-column prop="investMoneyBefore" label="变动前">
            </el-table-column>
            <el-table-column prop="investMoneyAfter" label="变动后">
            </el-table-column>
          </el-table-column>
          <el-table-column prop="" label="总份额" align="center">
            <el-table-column prop="investShare" label="变动前">
              <template slot-scope="{ row }">
                {{ row.investShare || 0 }}
              </template>
            </el-table-column>
            <el-table-column prop="investShareAfter" label="变动后">
              <template slot-scope="{ row }">
                {{ row.investShareAfter || 0 }}
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column prop="" label="杠杆率" align="center">
            <el-table-column prop="leverRatioBefore" label="变动前">
            </el-table-column>
            <el-table-column prop="leverRatioAfter" label="变动后">
            </el-table-column>
          </el-table-column>
          <el-table-column prop="" label="复利方式" align="center">
            <el-table-column
              prop="compoundTypeBefore"
              label="变动前"
              width="90"
            >
              <template slot-scope="{ row }">
                <span v-if="row.compoundTypeBefore === 1">不复利</span>
                <span v-else-if="row.compoundTypeBefore === 2">
                  与组合周期相同
                </span>
                <span v-else-if="row.compoundTypeBefore === 3"> 单独复利 </span>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop="compoundTypeAfter" label="变动后" width="90">
              <template slot-scope="{ row }">
                <span v-if="row.compoundTypeAfter === 1">不复利</span>
                <span v-else-if="row.compoundTypeAfter === 2">
                  与组合周期相同
                </span>
                <span v-else-if="row.compoundTypeAfter === 3"> 单独复利 </span>
                <span v-else>-</span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column prop="" label="加仓阈值(万元)" align="center">
            <el-table-column prop="thresholdBefore" label="变动前">
            </el-table-column>
            <el-table-column prop="thresholdAfter" label="变动后">
            </el-table-column>
          </el-table-column>
          <el-table-column prop="" label="加仓单位(万元)" align="center">
            <el-table-column prop="accumulatingUnitsBefore" label="变动前">
            </el-table-column>
            <el-table-column prop="accumulatingUnitsAfter" label="变动后">
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop="configurationStatus"
            label="配置状态"
            align="center"
          >
            <template slot-scope="{ row }">
              <span v-if="row.configurationStatus === 1">配置成功</span>
              <span v-else-if="row.configurationStatus === 2">配置失败</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getConfigurationtime,
  getCompositionLog,
  getClassifyLog,
  getStrategyLog,
} from "@/api/combManage";
export default {
  data() {
    return {
      yearTabs: "",
      configTime: [],
      tableComposition: [],
      tableClassify: [],
      tableStrategy: [],
      date: "",
    };
  },
  props: {
    parentConfigurationTime: {
      type: String | Number,
    },
    compositionId: {
      type: String | Number,
    },
    configType: {
      type: String | Number,
    },
  },
  watch: {
    parentConfigurationTime: {
      handler(newVal, oldVal) {
        this.date = newVal ? newVal.split(" ")[0] : "";
        this.yearTabs = newVal ? newVal.split("-")[0] : "";
        this.getLogDetail(this.date);
      },
      // immediate: true,
    },
    compositionId: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.date = this.parentConfigurationTime
            ? this.parentConfigurationTime.split(" ")[0]
            : "";
          this.yearTabs = this.parentConfigurationTime
            ? this.parentConfigurationTime.split("-")[0]
            : "";
          this.getConfigurationtime();
          this.getLogDetail(this.date);
        } else {
          this.configTime = [];
          this.tableComposition = [];
          this.tableClassify = [];
          this.tableStrategy = [];
        }
      },
      // immediate: true,
    },
  },
  // activated() {
  //   this.date = newVal ? newVal.split(" ")[0] : "";
  //       this.yearTabs = newVal ? newVal.split("-")[0] : "";
  //   this.getConfigurationtime();
  // },
  created() {
    if (this.configType !== "created") {
      this.getConfigurationtime();
    }
  },
  methods: {
    formatTime(data) {
      this.configTime = [];
      data.map((item) => {
        const date = item.configurationTime.split(" ")[0];
        const year = date.split("-")[0];
        const month = date.split("-")[1];
        const day = date.split("-")[2];
        const row = {
          year: year,
          children: [`${month}-${day}`],
        };
        const list = this.configTime.filter((item) => {
          return item.year === year;
        });
        if (!list.length) {
          this.configTime.push(row);
        } else {
          list[0].children.push(`${month}-${day}`);
        }
      });
      console.log(this.configTime);
      // this.yearTabs = this.configTime[0].year;
    },
    getLogDetail(date) {
      this.date = date;
      this.getCompositionLog();
      this.getClassifyLog();
      this.getStrategyLog();
    },
    getConfigurationtime() {
      getConfigurationtime({
        compositionId: this.compositionId,
        startDate: this.date,
        endDate: this.date,
      }).then((res) => {
        this.formatTime(res.body);
      });
    },
    getCompositionLog() {
      getCompositionLog({
        compositionId: this.compositionId,
        startDate: this.date,
        endDate: this.date,
      }).then((res) => {
        this.tableComposition = res.body;
      });
    },
    getClassifyLog() {
      getClassifyLog({
        compositionId: this.compositionId,
        startDate: this.date,
        endDate: this.date,
      }).then((res) => {
        this.tableClassify = res.body;
      });
    },
    getStrategyLog() {
      getStrategyLog({
        compositionId: this.compositionId,
        startDate: this.date,
        endDate: this.date,
      }).then((res) => {
        this.tableStrategy = res.body;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.head {
  .title {
    .product {
      font-size: 20px;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.75);
      line-height: 28px;
    }
  }
}
.card {
  padding-bottom: 10px;
  margin-top: 10px;
  background: #fff;
}
</style>
